<template>
	<view class="tab-bar-bar">
		<view class="title-bar">
			<text style="color:transparent">保存</text>
			<text style="font-size: 36rpx;color:#333;line-height: 
			36rpx;font-weight: 400;">健康档案</text>
			<text style="font-size: 28rpx;color: #2984F8;line-height: 28rpx;" @click="upDateMessage">保存</text>
		</view>
		<view class="tab-bar">
			<view :class="['tab-item', { active: currentTab === 0 }]" @click="currentTab = 0">基础信息</view>

			<view :class="['tab-item', { active: currentTab === 1 }]" @click="currentTab = 1">健康信息</view>

		</view>
	</view>

	<view v-show="currentTab==0">
		<health-baseMessage ref="baseRef"></health-baseMessage>
	</view>
	<view v-show="currentTab==1">
		<health-message ref="messageRef"></health-message>
	</view>


	<!-- 民族 -->
	<!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup> -->
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		useUserStore
	} from '../../../store/user.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		upDateREsidentApi
	} from '../../../api/home.js';
	const baseRef = ref(null)
	const messageRef = ref(null)
	// 修改
	function upDateMessage() {
		if (currentTab.value == 0) {
			baseRef.value.updateResident()
		} else {
			messageRef.value.updateResident()
		}
	}


	const currentTab = ref(0);
	const userStore = useUserStore()
</script>

<style scoped>
	.tab-bar-bar {}

	.tab-bar {
		display: flex;
		margin: 0 auto;
		align-items: center;
		background-color: rgba(242, 242, 242, 1);
		width: 670rpx;
		height: 64rpx;
		padding: 16rpx 8rpx;
		border-radius: 24rpx;
		margin-bottom: 10rpx;

	}

	.tab-item {
		width: 334rpx;
		height: 100%;
		text-align: center;
		padding: 10rpx 0;
		transition: all 0.3s;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 24rpx;
		/* 动画过渡，切换更丝滑 */
	}

	.tab-item.active {
		color: #409eff;
		background-color: #fff;

		/* border-bottom: 2px solid #409eff; */
	}

	.title-bar {
		width: calc(750rpx - 64rpx);
		display: inline-block;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

	}
</style>